<template>
  <div class="member">
    <h3>角色管理</h3>
    <!-- 头部 -->
    <div class="main">
      <div class="left">

      </div>
      <div class="right">
        <ProTable :data="tableData" :columns="columns" :max-height="maxHeight">
          <template #status="{row}">
            <el-switch v-model="row.status" />
          </template>
          <template #oper="{row}">
            <el-button type="primary" link @click="roleUpdate(row)">
              编辑
            </el-button>
            <el-button type="error" link @click="roleRemove(row)">
              删除
            </el-button>
          </template>
      </ProTable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { AxiosResponse } from 'axios'
import { ElMessage, ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getRoles, getPermissions, getPermissionsId } from '../../api/roles'
import ProTable from '../../components/table/table.vue'

interface User {
  id: string
  name: string
  description: string
  createdAt: string
  status: boolean
}

// left-height
const maxHeight = ref(650)
onMounted(() => {
  maxHeight.value = document.body.scrollHeight - 264
  console.log(maxHeight.value)
})

// 表单数据
const tableData: User[] = reactive([])
const defaultChecked = ref(['64634367a074b8ae4f2ca7e3'])
const columns = reactive([
  {
    label: '用户名',
    prop: 'name',
  },
  {
    label: '账号',
    prop: 'id',
  },
  {
    label: '角色',
    prop: 'description',
  },
  {
    label: '状态',
    key: 'status',
    slot: true,
  },
  {
    label: '操作',
    width: '115',
    key: 'oper',
    slot: true, // 自定义的属性名称, 标记该列的渲染使用插槽自定义
  },
])

getRoles().then((res:AxiosResponse<any, any>) => {
  const { list } = res
  // createdAt: "2022-11-27T14:07:45.138Z"
  // description: "超级管理员, 拥有所有权限."
  // id: "63836f31408dc8929d700a48"
  // name: "超级管理员"
  // status:true

  list.forEach((item: any) => {
    const {
      id, createdAt, description, name, status
    } = item
    tableData.push({
      id, createdAt, description, name, status
    })
  })
})
interface Role {
  id: string
  name: string
  children?:[]
}
const defaultProps = {
  children: 'children',
  label: 'name',
  id: 'id',
}
const data:Role[] = reactive([])
// 所有权限
getPermissions().then((res:AxiosResponse<any, any>) => {
  let { list } = res
  // createdAt: "2023-05-06T07:43:42.916Z"
  // id: "6456052ea074b8ae4f2c8267"
  // name: "仪表盘"
  // pid: "6456052ea074b8ae4f2c8267"
  // rule: "/dashboard"
  // show: true
  // status: false
  // type: 1
  list.forEach((item: any) => {
    list.forEach((item2: any) => {
      if (item2.id === item.pid) {
        if (item2.children) {
          item2.children.push(item)
        } else {
          item2.children = [item]
        }
        // list.
      }
    })
  })
  list = list.filter((item: any) => !item.pid)
  data.splice(0, 1, ...list.reverse())
  console.log(data)
})
// 修改权限
const roleUpdate = async (row: any) => {
  defaultChecked.value = []
  const { permissions } = await getPermissionsId(row.id)
  console.log(permissions)
  permissions.forEach((item:any) => {
    defaultChecked.value.push(item.id)
  })
  console.log(defaultChecked.value)
  // ElNotification({
  //   title: '权限查询成功',
  //   message: defaultChecked.value as string,
  //   type: 'success',
  // })
}
// 删除
const roleRemove = (row: any) => {
  console.log(row)
}
// 保存权限
const saveRole = () => {
  // ElNotification({
  //   title: '成功',
  //   message: defaultChecked.value,
  //   type: 'success',
  // })
}
</script>

<style scoped>
</style>
